<template>
  <div class="app-container">
    <div class="cbox">
      <el-form :model="compForm" label-width="8rem" ref="compForm" size="mini" inline :rules="compFormRules">
        <el-row>
          <el-col :span="24">
            <el-form-item label="TIR编号：" prop="tirgms">
              <el-input clearable maxlength="18" v-model.trim="compForm.tirgms"></el-input>
            </el-form-item>
            <el-form-item label-width="2rem">
              <el-button @click="searchList" type="primary">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <el-row :gutter="10" class="btn-area">
      <el-col :span="24">
        <el-button size="mini" type="success" plain @click="add">新增</el-button>
        <el-button size="mini" type="primary" plain @click="edit">编辑</el-button>
        <el-button size="mini" type="danger" plain @click="del">删除</el-button>
      </el-col>
    </el-row>

    <div class="table">
      <div class="inner" ref="inner">
        <el-table
          :data="compList"
          :highlight-current-row="true"
          @row-click="getCurrentRow"
          @row-dblclick="storageDetail"
          border
          :header-cell-style="{
            textAlign: 'center'
          }"
          :height="maxHeight">
          <el-table-column align="center" label="序号" type="index" :index="indexMethod" show-overflow-tooltip width="60"></el-table-column>
          <el-table-column  align="center" label="证件操作" width="180">
            <template slot-scope="scope">
              <el-link type="primary" @click="upload(scope.row)" :underline="false">证件上传</el-link>&nbsp;&nbsp;
              <el-link type="primary" @click="check(scope.row)" :underline="false">证件查看</el-link>
            </template>
          </el-table-column>
          <el-table-column align="left" label="TIR编号" prop="tirgms" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="起运地海关" prop="startCustoms" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="国际组织名称" prop="organization" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="持证人" prop="owner" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="起运地国" prop="startCountry" show-overflow-tooltip></el-table-column>
          <el-table-column align="left" label="目的地国" prop="endCountry" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" label="公路车辆登记号" prop="carNumber" show-overflow-tooltip></el-table-column>
        </el-table>
      </div>
    </div>

    <el-pagination
      class="pagination"
      small
      background
      ref="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Pagination.currentPage"
      :page-sizes="Pagination.pageSizeList"
      :page-size="Pagination.pageSize"
      :layout="Pagination.layout"
      :total="Pagination.total">
    </el-pagination>

    <el-dialog v-el-drag-dialog ref="dialog" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="showDialog" v-if="showDialog" :title="operate">
      <el-form :model="dialogForm" ref="dialogForm" label-width="14rem" size="mini" :rules="dialogFormRules">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="TIR编号：" prop="tirgms">
              <el-input clearable :disabled="disabledtirgms" v-model="dialogForm.tirgms"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="起运地海关：" prop="startCustoms">
              <el-input clearable :disabled="disabled" v-model="dialogForm.startCustoms"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="国际组织名称：" prop="organization">
              <el-input clearable :disabled="disabled" v-model="dialogForm.organization"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="持证人：" prop="owner">
              <el-input clearable :disabled="disabled" v-model="dialogForm.owner"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="起运地国：" prop="startCountry">
              <el-input clearable :disabled="disabled" v-model="dialogForm.startCountry"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目的地国：" prop="endCountry">
              <el-input clearable :disabled="disabled" v-model="dialogForm.endCountry"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公路车辆登记号：" prop="carNumber">
              <el-input clearable :disabled="disabled" v-model="dialogForm.carNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="save" v-if="!disabled" type="primary">保存</el-button>
        <el-button size="mini" @click="closeDialog()">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog v-el-drag-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="checkDialog" title="证件查看">
      证件查看
    </el-dialog>

    <el-dialog v-el-drag-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="uploadDialog" title="证件上传">
      证件上传
    </el-dialog>

  </div>
</template>

<script>
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
import { getTIRCarriage, addTirCarriage, editTirCarriage, delTIRCarriage } from '../../../request/internal/tirgms'
// 定义基础操作类型
const OPERATION_TYPE = {
  ADD: 'add',
  EDIT: 'edit',
  VIEW: 'view'
}
export default {
  name: 'router.tirgms',
  mixins: [resizeMixin, paginationMixin],
  data() {
    return {
      currentData: null, // 当前选中的行
      showDialog: false, // 弹出窗是否显示
      checkDialog: false, // 查看弹出窗
      uploadDialog: false, // 上传弹出窗
      maxHeight: -1,
      operateType: '', // 操作类型
      compForm: {
        tirgms: '', // TIR 编号
      },
      compFormRules: {},
      dialogForm: {
        tirgms: '', // TIR 编号
        startCustoms: '', // 起运地海关
        organization: '', // 国际组织名称
        owner: '', // 持证人
        startCountry: '', // 起运地国
        endCountry: '', // 目的地国
        carNumber: '', // 公路车辆登记号
      },
      dialogFormRules: {
        tirgms: [{ required: true, message: '必填', trigger: 'blur' }], // TIR 编号
        startCustoms: [{ required: true, message: '必填', trigger: 'blur' }], // 起运地海关
        organization: [{ required: true, message: '必填', trigger: 'blur' }], // 国际组织名称
        owner: [{ required: true, message: '必填', trigger: 'blur' }], // 持证人
        startCountry: [{ required: true, message: '必填', trigger: 'blur' }], // 起运地国
        endCountry: [{ required: true, message: '必填', trigger: 'blur' }], // 目的地国
        carNumber: [{ required: true, message: '必填', trigger: 'blur' }], // 公路车辆登记号
      },
      compList: [
        {
          tirgms: '123', // TIR 编号
          startCustoms: '223', // 起运地海关
          organization: '323', // 国际组织名称
          owner: '423', // 持证人
          startCountry: '523', // 起运地国
          endCountry: '623', // 目的地国
          carNumber: '723', // 公路车辆登记号
        }
      ],

    }
  },
  computed: {
    // 弹出窗的 TITLE
    operate () {
      const message = {
        [OPERATION_TYPE.ADD]: '新增TIR/GMS认证',
        [OPERATION_TYPE.EDIT]: '编辑TIR/GMS认证',
        [OPERATION_TYPE.VIEW]: '查看TIR/GMS认证'
      }
      if (!this.operateType) return ''
      return message[this.operateType] || ''
    },
    // 查看状态时 禁用组件
    disabled () {
      return this.operateType === OPERATION_TYPE.VIEW
    },
    // 非新增状态时 禁用组件
    disabledtirgms () {
      return this.operateType !== OPERATION_TYPE.ADD
    }
  },
  mounted() {
    this.refreshList()
  },
  created() {
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  methods: {
    getList(currentPage, pageSize, updateTotal) {
      getTIRCarriage({
        tirgms: this.compForm.tirgms,
        currentPage,
        pageSize
      }).then(res => {
        this.compList = res.data.FTKJWLHYPT.map((item) => {
          return {
            tirId: item.tirId,
            tirgms: item.tirNum, // TIR 编号
            startCustoms: item.tirCustomsStart, // 起运地海关
            organization: item.tirInterorganizationName, // 国际组织名称
            owner: item.tirHolder, // 持证人
            startCountry: item.tirCountryStart, // 起运地国
            endCountry: item.tirCountryEnd, // 目的地国
            carNumber: item.tirHighwayRegistnum, // 公路车辆登记号
          }
        })
        updateTotal(Number(res.data.total.FTKJWLHYPT))
      })
    },
    upload (row) {
      console.log(row)
      this.uploadDialog = true
    },
    check (row) {
      console.log(row)
      this.checkDialog = true
    },
    add() {
      this.operateType = OPERATION_TYPE.ADD
      this.dialogForm = {
        tirgms: '', // TIR 编号
        startCustoms: '', // 起运地海关
        organization: '', // 国际组织名称
        owner: '', // 持证人
        startCountry: '', // 起运地国
        endCountry: '', // 目的地国
        carNumber: '', // 公路车辆登记号
      }
      this.openDialog()
    },
    edit() {
      if (!this.currentData) {
        this.showTips('请选择一行数据！')
        return
      }
      this.operateType = OPERATION_TYPE.EDIT
      this.dialogForm = Object.assign({}, this.currentData)
      this.openDialog()
    },
    showTips (message) {
      this.$alert(message,'提示',{
        type: 'warning',
        confirmButtonText:'确定'
      })
    },
    view () {
      if (!this.currentData) {
        this.showTips('请选择一行数据！')
        return
      }
      this.operateType = OPERATION_TYPE.VIEW
      this.dialogForm = Object.assign({}, this.currentData)
      this.openDialog()
    },
    del() {
      if (!this.currentData) {
        this.showTips('请选择需要删除的数据！')
        return
      }
      this.$confirm('您确定要删除该数据吗？','提示',{
        type: 'warning',
        confirmButtonText:'确定'
      }).then(() => {
        delTIRCarriage({
          tirId: this.currentData.tirId
        }).then(() => {
          this.$message.success('删除成功！')
          this.currentData = null
          this.refreshList()
        })
      })
    },
    save() {
      if (this.operateType === OPERATION_TYPE.ADD) {
        addTirCarriage(this.dialogForm).then(() => {
          this.$message.success('新增TIR/GMS认证成功！')
          this.currentData = null
          this.refreshList()
          this.closeDialog()
        })
      } else if (this.operateType === OPERATION_TYPE.EDIT) {
        editTirCarriage(this.dialogForm).then(() => {
          this.currentData = null
          this.$message.success('编辑TIR/GMS认证成功！')
          this.refreshList()
          this.closeDialog()
        })
      }
    },

    // 获取当前选中行
    getCurrentRow(row) {
      this.currentData = row
    },

    // 双击查看
    storageDetail(row) {
      this.currentData = row
      this.view()
    },

    closeDialog () {
      this.showDialog = false
    },
    openDialog () {
      this.showDialog = true
    },
  }
}
</script>

<style lang="scss" scoped>
.el-select {
  width: 100%;
}

.app-container {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;

  .table {
    flex: 1;
    position: relative;
    overflow: hidden;

    .inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .el-pagination {
      height: 4rem;
      flex: 0 0 auto;
      margin: 1rem 0;
    }
  }
}
</style>
